<template>
  <!-- 民警管理 -- 新增/编辑 -->
  <div>
    <public-modal
      width="550px"
      :footer="false"
      title="安全围栏设置"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          class="formStyle"
          autocomplete="off"
          layout="inline"
          :labelCol="{ style: 'width: 140px' }"
        >
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="安全围栏预警:" prop="enable">
                <a-switch default-checked v-model="form.enable" />
              </a-form-model-item>
              <a-form-model-item label="安全围栏生效时间段:" prop="simNumber">
                <el-time-picker
                  class="tiem-select-picker"
                  is-range
                  v-model="form.times"
                  format="HH:mm"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                >
                </el-time-picker>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </public-modal>
  </div>
</template>

<script>
import { uploadFile } from '@/api/api'
import { checkIDCard } from '@/utils/validate.js'
import publicModal from '@/components/publicModal'
import { putAction, postAction } from '@/api/manage'
import { isMobile } from '@/utils/validate'
import { pick } from 'lodash-es'
import { wbHttpFences } from '../../../../api/api'
import moment from 'moment'

export default {
  name: 'addPoliceModal',
  components: { publicModal },
  props: {
    point: {
      type: Array,
      default() {
        return []
      },
    },
    deviceInfo: {
      type: Object,
      default() {
        return {}
      },
    },
    fenceInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      title: '新增',
      record: {},
      publicVisible: false,
      imageUrl: [],
      fileList: [],
      showUploadList: { showPreviewIcon: false },
      form: {
        enable: false,
        times: '',
      },
      rules: {
        enable: [{ required: true, message: '请选择' }],
      },
      actionType: 'add',
    }
  },
  mounted() {},
  methods: {
    async show(record = {}, actionType = 'add') {
      this.record = record
      this.publicVisible = true
      this.actionType = actionType
      if (record && record.id) {
        this.title = `编辑设备`
        this.form = pick(record, ['id', 'imei', 'simNumber', 'departmentName'])
      } else {
        function createTimeFromStr(timeStr) {
          const [hour, minute] = timeStr.split(':').map(Number)
          const currentDate = new Date()
          currentDate.setHours(hour)
          currentDate.setMinutes(minute)
          currentDate.setSeconds(0)
          currentDate.setMilliseconds(0)
          return currentDate
        }
        this.form = {
          enable: this.fenceInfo.enable == 1 ? true : false,
          times: [createTimeFromStr(this.fenceInfo.timeBegin), createTimeFromStr(this.fenceInfo.timeEnd)],
        }
        this.title = `新增设备`
      }
    },

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileList.splice(index, 1)
      this.imageUrl.splice(index, 1)
    },
    async customRequest(info) {
      let file = info.file
      const formData = new FormData()
      formData.append('file', file)
      if (this.status == 0) formData.append('type', 2)
      else if (this.status == 1) formData.append('type', 63)
      else if (this.status == 2) formData.append('type', 64)
      let res = await uploadFile(formData)
      if (res.code == 200) {
        this.imageUrl.push(res.result.halfPath)
      }
    },
    uploadChange({ file, fileList }) {
      file.status = 'done'
      this.fileList = fileList
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return

        const pos = this.point.reduce((acc, curr, index) => {
          acc[`pos${index + 1}Lon`] = curr.lng
          acc[`pos${index + 1}Lat`] = curr.lat
          return acc
        }, {})
        console.log(this.form)
        const start = moment(this.form.times[0]).format('HH:mm')
        const end = moment(this.form.times[1]).format('HH:mm')
        console.log(start, end)
        wbHttpFences({
          freq: 1,
          timeBegin: start,
          timeEnd: end,
          deviceId: this.deviceInfo.id,
          imei: this.deviceInfo.imei,
          type: 0, // 不删除
          enable: this.form.enable ? 1 : 0,
          ...pos,
        }).then((res) => {
          this.$emit('setFence')
          this.publicVisible = false
          this.$message.success('设置成功!')
        })
      })
    },

    cancel() {
      this.publicVisible = false
      this.fileList = []
      this.imageUrl = []
      this.form = {}
    },
  },
}
</script>

<style scoped lang="less">
.formStyle {
  padding: 0.2rem;
  /deep/.ant-col {
    height: unset;
  }
  .ant-form-item-with-help {
    margin-bottom: 0px !important;
  }
  .ant-form-item {
    margin-bottom: 20px !important;
  }
  /deep/ .ant-form-explain {
    position: absolute;
  }
}

.tiem-select-picker {
  width: 100% !important;
}

.imageUpload {
  margin-bottom: 150px;
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 150px;
      height: 176px;
      background: var(--theme-input-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  /deep/.ant-upload-select-picture-card {
    width: 150px;
    height: 176px;
  }

  /deep/ .ant-upload-list-item {
    width: 150px;
    height: 176px;
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }
}
</style>
